<template>
	<div class="shop-view">
		<template v-if="options.city_data.length">
			<div class="title">选择城市预约</div>
			<div class="city-list">
				<div
					class="city-list__item"
					v-for="(item, index) in options.city_data"
					:key="index"
				>
					<div class="item ellipsis">
						{{ item }}
					</div>
				</div>
			</div>
		</template>
		<div v-else class="view-empty">{{ view.name }}</div>
	</div>
</template>
<script>
export default {
	name: "shop-view",
	props: {
		view: {
			type: Object,
			default: () => ({})
		}
	},
	computed: {
		options() {
			return this.view.options || {};
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	padding: 10px 0 0;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	color: #222;
	line-height: 1;
}
.city-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;

	&__item {
		width: 33.3333333%;
		// float: left;
		padding: 5px;
		box-sizing: border-box;
		.item {
			height: 35px;
			line-height: 35px;
			padding: 0 6px;
			background: #fff6ee;
			border: 1px solid #ff7400;
			color: #ff7400;
			text-align: center;
			font-size: 14px;
			border-radius: 4px;
			box-sizing: border-box;
		}
	}
}
</style>
